<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    {{template "title"}}
    {{template "commonCss"}}
    {{template "writeArticle"}}
    {{template "headerAndFooter"}}
    {{template "commonJs"}}
    {{template "editormd"}}
</head>
<body>
{{template "header" .}}
<div class="art-container">
    <div class="form-group has-error">
        <input type="text" class="form-control" id="art-title" placeholder="请输入标题">
        <label class="control-label art-title-err-info" for="art-title">请输入标题</label>
    </div>

    <div class="about">
        <input type="text" class="form-control" id="art-about" placeholder="请输入简介">
    </div>

    <div id="editormd">
        <textarea style="display:none;" class="form-control" id="content-editormd-markdown-doc"
                  name="content-editormd-markdown-doc"></textarea>
    </div>
    <div class="group-btn">
        <button type="button" class="btn btn-success release-btn">发布</button>
    </div>
</div>
{{template "footer"}}
<script type="text/javascript">
    $(function () {

        // 初始化markdown
        var editor = editormd("editormd", {
            width: "100%", // 宽度，不填为100%
            height: 500, //高度，不填为100%
            path: "/static/plugins/editormd/lib/", // 定位到lib库
            saveHTMLToTextarea: true, // 保存 HTML 到 Textarea
            toolbarAutoFixed: true, // 工具栏自动固定定位的开启与禁用
            /* 上传图片配置 */
            imageUpload: true,
            imageFormats: ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
            imageUploadURL: "/upload",
            syncScrolling: "single",
            // emoji: true,//emoji表情，默认关闭
        });

        // 发布文章
        $(".release-btn").click(function () {
            // 获取预览窗口里的 HTML
            console.log("获取html：", editor.getPreviewedHTML());
            // 获取标题
            console.log("获取的标题是：", $.trim($("#art-title").val()));
            $.ajax({
                //请求方式
                type: 'POST',
                //发送请求的地址
                url: '/article/post',
                //服务器返回的数据类型
                dataType: 'json',
                contentType: "application/json",
                //发送到服务器的数据，对象必须为key/value的格式，jquery会自动转换为字符串格式
                data: JSON.stringify({
                    title: $.trim($("#art-title").val()),
                    about: $.trim($("#art-about").val()),
                    content: editor.getPreviewedHTML()
                }),
                success: function (data) {
                    //请求成功函数内容
                    if (data.isSuccess) {
                        $(window).attr('location', '/');
                    }
                },
                error: function (err) {
                    //请求失败函数内容
                    console.log("失败", err)
                }

            })
        });

        // 判断是否填写标题
        $("#art-title").change(function (e) {
            if (!$.trim(e.target.value)) {
                $(".form-group").addClass("has-error");
                $(".art-title-err-info").css("display", "block")
            } else {
                if ($(".form-group").hasClass("has-error")) {
                    $(".form-group").removeClass("has-error");
                    $(".art-title-err-info").css("display", "none")
                }

            }

        })
    });


</script>
</body>
</html>